import React from 'react';
import { Spin } from 'antd';
import cn from 'classnames';
import { useInterviewWay } from '@/pages/RecruitEmail/hooks';
// import BizIcon from '@/components/BizIcon';
import { useInterview } from '../../../hooks';
import { STATUS } from '../../../constants';
import { Button, Result, InterviewDetail, Divider, TimeList } from '../../components';
import refusePic from '../../../images/interview-bg-refuse.png';
import initialPic from '../../../images/interview-bg-new.png';
import styles from './index.less';

const Interview = ({ nid, id }) => {
    const {
        status,
        data,
        loading,
        submitLoading,
        handleAccept,
        handleUpdate,
        handleRefuse,
        handleCheck
    } = useInterview(nid, id);
    // console.log('🚀 ~ Interview ~ data', data);
    // const status = 0;

    // const editable = linkStep === 1;

    const interviewTimeList = data?.interviewTimeList || [];

    const TIME = {
        [STATUS.UPDATE]: (
            <div>
                <div>待定{interviewTimeList?.length > 0 ? `（已选${interviewTimeList?.length}）` : ''}</div>
                <TimeList dataSource={interviewTimeList} />
            </div>
        ),
        [STATUS.ACCEPT]: (
            <div style={{ display: 'flex', alignItems: 'center', flexWrap: 'wrap' }}>
                {data?.interviewTimeStr || '--'}
                {/* {editable && ( */}
                {/*    <div onClick={handleUpdate} className={styles.editBtn}> */}
                {/*        <BizIcon type="listfunction_edit_icon_default" /> */}
                {/*        修改 */}
                {/*    </div> */}
                {/* )} */}
            </div>
        )
    };

    const [wayLabel, wayDetail] = useInterviewWay({
        interviewWayName: data?.interviewWayName,
        interviewLocation: data?.interviewLocation,
        videoLink: data?.videoLink
    });

    const list = [
        {
            key: '面试岗位',
            value: data?.dutyName || '--'
        },
        {
            key: '面试轮次',
            value: data?.interviewRoundName || '--'
        },
        {
            key: '面试时间',
            value: TIME[status] || data?.interviewTimeStr || '--'
        },
        {
            key: wayLabel,
            value: wayDetail
        },
        {
            key: '面试方式',
            value: data?.interviewWayName || '--'
        }
    ];

    return (
        <div className={styles.interviewMobile}>
            <div className={styles.fakeItem} style={status !== STATUS.INITIAL ? { background: '#fff' } : {}}></div>
            <Spin spinning={loading}>
                <div style={status !== STATUS.INITIAL ? { background: '#fff' } : {}}>
                    <Result
                        type={status}
                        show={data?.registerStatus !== 1}
                        onClick={handleCheck}
                        style={status === STATUS.INITIAL ? { paddingBottom: 0 } : {}}
                    />
                    {status === STATUS.INITIAL && (
                        <img
                            alt=""
                            src={initialPic}
                            style={{ display: 'block', width: '80%', margin: '0 auto', paddingLeft: 24 }}
                        />
                    )}
                    {(status === STATUS.UPDATE || status === STATUS.REFUSE) && (
                        <img
                            alt=""
                            src={refusePic}
                            style={{ width: '100%', paddingLeft: 24, marginTop: -24, marginBottom: 16 }}
                        />
                    )}
                    {/* {status === STATUS.ACCEPT && data?.registerStatus !== 1 && ( */}
                    {status === STATUS.ACCEPT && (
                        <div className={styles.btnWrap}>
                            <Button type="primary" onClick={handleCheck}>
                                立即完善
                            </Button>
                        </div>
                    )}
                </div>
                <Divider />
                <div className={cn(styles.fullDetail, { [styles.halfDetail]: status === STATUS.INITIAL })}>
                    {status === STATUS.ACCEPT && <div className={styles.info}>面试信息</div>}
                    <InterviewDetail
                        dataSource={list}
                        keyStyle={{
                            opacity: status === STATUS.REFUSE ? 0.5 : 1
                        }}
                        valueStyle={{
                            opacity: status === STATUS.REFUSE ? 0.5 : 1
                        }}
                    />
                    {status === STATUS.INITIAL && (
                        <div style={{ marginTop: 16 }}>
                            <Button type="primary" loading={submitLoading} onClick={handleAccept}>
                                接受
                            </Button>
                            <div style={{ marginTop: 16, display: 'flex' }}>
                                <Button onClick={handleRefuse} style={{ marginRight: 15, flex: 1 }}>
                                    拒绝
                                </Button>
                                <Button onClick={handleUpdate} style={{ flex: 1 }}>
                                    修改时间
                                </Button>
                            </div>
                        </div>
                    )}
                </div>
            </Spin>
        </div>
    );
};

export default Interview;
